<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 50px;
            width: 50px;
            background-color: rgb(116, 235, 116);
            color: #fff;
            font-size: 32px;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">开</div>
    <script>
        // 1.设置一个程序进行以下字符串的操作,把以下字符串进行反转,并首尾字母大写,以字符串的方式输出
        function strReverse(str){
            let arr=str.split("");
            arr.reverse();
            arr[0]=arr[0].toUpperCase();
            arr[arr.length-1]=arr[arr.length-1].toUpperCase();
            return arr.join("");
            
        }
        console.log(strReverse("adfljlacz"));
        // 2.使用一个事件源,绑定一个事件类型,对应一个事件处理函数,实现两种不同的效果？如:开关效果
        let box=document.querySelector(".box");
        box.addEventListener("click",function(){
            if(box.textContent==="开"){
                box.textContent="关";
            }
            else{
                box.textContent="开";
            }
        })
        // 3.封装函数把指定对象中的内容以地址栏传参数的方式改写
        let person={
            name:"李寻欢",
            sex:"男",
            age:38,
            hobby:"平时喜欢写代码"
        }
        function local(a){
            return `?name=${a.name}&age=${a.age}&....`;
        }
        console.log(local(person));
    </script>
</body>
</html>